<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.2.6/vue.min.js"></script>
</head>
<body>
<div id="demo">{{ fullName }}</div>

<script>
	var vm = new Vue({
		el: '#demo',
		data: {
			firstName: 'Foo',
			lastName: 'Bar',
			fullName: 'Foo Bar'
		},
		watch: {
			firstName: function(val) {
				this.fullName = val + '' + this.lastName
			},
			lastName: function(val) {
				this.fullName = this.firstName + '' + val
			}
		}
	});

	// 上面的代码是命令式的和重复的。将它与computed属性的版本进行比较

	// var vm = new Vue({
	// 	el: '#demo',
	// 	data: {
	// 		firstName: 'Foo',
	// 		lastName: 'Bar'
	// 	},
	// 	computed: {
	// 		fullName: function() {
	// 			return this.firstName + '' + this.lastName
	// 		}
	// 	}
	// })

	var vm = new Vue({
		el: '#demo',
		data: {
			firstName: 'Foo',
			lastName: 'Bar'
		},
		computed: {
			fullName: {
				get: function() {
					return this.firstName + '' + this.lastName;
				},
				set: function() {
					var names = newValue.split('');
					this.firstName = names[0];
					this.lastName = names[names.length - 1];
				}
			}
		}
	})
</script>
</body>
</html>